<template>
    <div class="form-box">
        <el-button type="primary" @click="toLoginComponent" style="margin-right: 280px" plain><=返回登录</el-button>
        <h3 style="color: red">{{message}}</h3>
        <h3>健康打卡表单</h3>
        <el-form ref="form" v-bind:model="form" v-bind:rules="rules" label-width="80px">
            <el-form-item label="提交日期" prop="submitDate">
                <el-input v-model="form.submitDate" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="学号/工号" prop="username">
                <el-input v-model="form.username" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="realName">
                <el-input v-model="form.realName" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="telephoneNumber">
                <el-input v-model="form.telephoneNumber" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="identityNumber">
                <el-input v-model="form.identityNumber" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="体温" prop="temperature">
                <el-input v-model="form.temperature" v-bind:disabled="isSubmit"></el-input>
            </el-form-item>
            <el-form-item class="flex-btn">
                <el-button type="primary" @click="onSubmit('form')" v-bind:disabled="isSubmit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name: "SubmitForm",
    data() {
        return {
            message:'',
            isSubmit:true,
            form: {
                submitDate:'',
                id:null,
                userId:null,
                username: '',
                realName: '',
                telephoneNumber:'',
                identityNumber:'',
                temperature:null
            },
            rules: {
                temperature:[
                    {required: true, message: '请输入当日体温', trigger: 'blur'},
                    {message: '必须为数字', type: 'number'}
                ]
            }
        }
    },
    mounted() {
        this.init();
    },
    methods:{
        init(){
            var vm = this;
            this.axios({
                url: '/myapi/user/formData',
                method: 'get'
            }).then(function (response) {
                if(response.data.code===2001){
                    vm.$message.error('你还未登录!');
                    //后端返回的状态码为未登录，所以直接路由至登录页面
                    vm.$router.push("/")
                }
                //否则后端返回状态码为200，表示已登录，拿到数据，进行下面的判断，判断今日是否已经提交过打卡信息
                if(response.data.data.formData.isSubmit===1){
                    console.log('submit:'+response.data);
                    const d = new Date();
                    vm.form.submitDate = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
                    vm.form.id = response.data.data.formData.id;
                    vm.form.userId = response.data.data.formData.userId;
                    vm.form.username = response.data.data.formData.username;
                    vm.form.realName = response.data.data.formData.realName;
                    vm.form.telephoneNumber = response.data.data.formData.telephoneNumber;
                    vm.form.identityNumber = response.data.data.formData.identityNumber;
                    vm.form.temperature = response.data.data.formData.temperature;
                    //今日已经提交，无需二次提交
                    vm.isSubmit = true;
                    vm.message = "您今天已提交成功!";
                }
                else if(response.data.data.formData.isSubmit===0){
                    console.log('unsubmit:'+response.data);
                    const d = new Date();
                    vm.form.submitDate = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
                    vm.form.id = response.data.data.formData.id;
                    vm.form.userId = response.data.data.formData.userId;
                    vm.form.username = response.data.data.formData.username;
                    vm.form.realName = response.data.data.formData.realName;
                    vm.form.telephoneNumber = response.data.data.formData.telephoneNumber;
                    vm.form.identityNumber = response.data.data.formData.identityNumber;
                    vm.form.temperature = response.data.data.formData.temperature;
                    //今日还未提交
                    vm.isSubmit = false;
                    vm.message = "请进行每日健康打卡!";
                }
            });
        },
        onSubmit:function (formName){
            var vm = this;
            this.axios({
                url: '/myapi/submitForm',
                method: 'post',
                //使用data是body传参，使用params是query传参
                data:{
                    id: vm.form.id,
                    userId: vm.form.userId,
                    username: vm.form.username,
                    realName: vm.form.realName,
                    telephoneNumber: vm.form.telephoneNumber,
                    identityNumber: vm.form.identityNumber,
                    temperature:vm.form.temperature
                }
            }).then(function (response) {
                console.log(response.data);
                if(response.data.code===200){
                    vm.$message({
                        duration:600,
                        message: '健康打卡成功!',
                        type: 'success'
                    });
                    vm.init();
                }
                else if(response.data.code===999){
                    //后端重复打卡验证失败,说明用户想要绕过前端的限制去向后端重复打卡,如果正常按照前端来是不会触发的
                    vm.$message.error("不要尝试直接向后端接口进行重复打卡操作!");
                    vm.init();
                }
            });
        }
        ,toLoginComponent:function () {
            this.$router.push("/")
        }
    }
}
</script>

<style scoped>
.form-box{
    width: 500px;
    height: 750px;
    margin: 50px auto;
    padding: 10px 50px 20px 20px;

}
.flex-btn{
    float: left;
}
</style>
